<!-- 报警规则编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'修改报警规则':'添加报警规则'"
    :visible="visible"
    width="550px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px">

      <el-form-item
        label="报警参数:"
        prop="param">
        <el-select
          clearable
          v-model="form.param"
          placeholder="请选择报警参数">
          <el-option value="liuya" label="流压"></el-option>
          <el-option value="biao_liuya" label="校准流压"></el-option>
          <el-option value="jingdi_temp" label="井底温度"></el-option>
          <el-option value="taoya" label="套压"></el-option>
          <el-option value="yezhu_high" label="液柱高度"></el-option>
          <el-option value="shunshi_qiliang" label="瞬时气量"></el-option>
          <el-option value="liuliang_yali" label="流量计压力"></el-option>
          <el-option value="liuliang_temp" label="流量计温度"></el-option>
          <el-option value="tran_speed" label="转速"></el-option>
          <el-option value="pinlv" label="频率"></el-option>
          <el-option value="dianliu" label="电流"></el-option>
          <el-option value="dianya" label="电压"></el-option>
          <el-option value="chanshui" label="产水"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="计算:"
        prop="relationship">
        <el-select
          clearable
          v-model="form.relationship"
          placeholder="请选择">
          <el-option value=">" label="大于"></el-option>
          <el-option value="<" label="小于"></el-option>
          <el-option value=">=" label="大于等于"></el-option>
          <el-option value="<=" label="小于等于"></el-option>
          <el-option value="=" label="等于"></el-option>
          <el-option value="<>" label="范围"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="临界值1:"
        prop="threshold_start">
        <el-input
          :maxlength="20"
          v-model="form.threshold_start"
          placeholder="请输入临界值1"
          clearable/>
      </el-form-item>

      <el-form-item
        label="临界值2:"
        prop="threshold_end">
        <el-input
          :maxlength="20"
          v-model="form.threshold_end"
          placeholder="请输入临界值2"
          clearable/>
      </el-form-item>

      <el-form-item
        label="参数单位:"
        prop="param_units">
        <el-select
          clearable
          v-model="form.param_units"
          placeholder="请选择参数单位">
          <el-option value="V" label="伏特V"></el-option>
          <el-option value="mA" label="毫安mA"></el-option>
          <el-option value="A" label="安倍A"></el-option>
          <el-option value="m" label="米m"></el-option>
          <el-option value="Hz" label="赫兹Hz"></el-option>
          <el-option value="ml" label="毫升ml"></el-option>
          <el-option value="MPa" label="兆帕MPa"></el-option>
          <el-option value="kPa" label="千帕kPa"></el-option>
          <el-option value="℃" label="摄氏度℃"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="报警等级:" prop="alarm_level">
        <el-select
          clearable
          v-model="form.alarm_level"
          placeholder="请选择报警等级">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="井号:" prop="device_id">
        <el-select
          filterable
          clearable
          v-model="form.device_id"
          placeholder="请选择井号">
          <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态:">
        <el-radio-group
          v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注:">
        <el-input
          :rows="3"
          clearable
          type="textarea"
          :maxlength="200"
          v-model="form.note"
          placeholder="请输入备注"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'AlarmRulesEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      options: [
        { label: '1级', value: 1 },
        { label: '2级', value: 2 },
        { label: '3级', value: 3 },
      ],
      // 表单验证规则
      rules: {
        param: [
          {required: true, message: '请输入报警参数', trigger: 'blur'}
        ],
        relationship: [
          {required: true, message: '请输入计算', trigger: 'blur'}
        ],
        threshold_start: [
          {required: true, message: '请输入临界值1', trigger: 'blur'}
        ],
        param_units: [
          {required: true, message: '请输入参数单位', trigger: 'blur'}
        ],
        alarm_level: [
          {required: true, message: '请输入报警等级', trigger: 'blur'}
        ],
        device_id: [
          {required: true, message: '请选择井号', trigger: 'blur'}
        ],

        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        note: [
          {required: true, message: '请输入备注', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      deviceList: [],
      device_types: [
        { label: '杆式泵', value: '1' },
        { label: '螺杆泵', value: '2' },
        { label: '柱塞泵', value: '3' },
        { label: '管式泵', value: '4' },
      ],
    };
  },
  created() {
    this.getDeviceList();
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/alarmrules/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    getDeviceList(){
      this.$http.post('/device/all').then(res => {
        if (res.data.code === 0) {
          this.deviceList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped>
</style>
